<template>
  <div class="user">
    <el-form
      ref="ruleForm"
      :rules="rules"
      label-position="left"
      label-width="100px"
      :model="ruleForm"
    >
      <el-form-item label="参赛编号：" prop="number">
        <p>{{ userInfo.match_number }}</p>
      </el-form-item>
      <el-form-item label="团队名称：" prop="title">
        <el-input
          v-model="ruleForm.title"
          placeholder="请输入团队名称"
        ></el-input>
      </el-form-item>
      <div class="team-title">团队成员</div>
      <!-- 负责人： -->
      <div class="team-list">
        <el-form-item label="负责人：">
          <el-input
            v-model="type0.name"
            placeholder="请输入负责人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select class="flex-1" v-model="type0.sex" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作部门：">
          <el-input
            v-model="type0.work_branch"
            placeholder="请输入工作部门"
          ></el-input>
        </el-form-item>
        <el-form-item label="职务：">
          <el-input v-model="type0.job" placeholder="请输入职务"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="type0.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="type0.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <div class="line"></div>
      </div>
      <!-- 联系人： -->
      <div class="team-list">
        <el-form-item label="联系人：">
          <el-input
            v-model="type1.name"
            placeholder="请输入联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select class="flex-1" v-model="type1.sex" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作部门：">
          <el-input
            v-model="type1.work_branch"
            placeholder="请输入工作部门"
          ></el-input>
        </el-form-item>
        <el-form-item label="职务：">
          <el-input v-model="type1.job" placeholder="请输入职务"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="type1.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="type1.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <div class="line"></div>
      </div>
      <!-- 成员 -->
      <div
        class="team-list"
        v-for="(item, index) in ruleForm.userList"
        :key="index"
      >
        <el-form-item label="姓名：">
          <el-input v-model="item.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select class="flex-1" v-model="item.sex" placeholder="请选择">
            <el-option
              v-for="item2 in options"
              :key="item2.value"
              :label="item2.label"
              :value="item2.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作部门：">
          <el-input
            v-model="item.work_branch"
            placeholder="请输入工作部门"
          ></el-input>
        </el-form-item>
        <el-form-item label="职务：">
          <el-input v-model="item.job" placeholder="请输入职务"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="item.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="item.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <div class="add-box">
          <el-button
            class="remove"
            type="primary"
            @click="removeAttr(item, index)"
            plain
            >- 删除成员</el-button
          >
        </div>

        <div class="line"></div>
      </div>
    </el-form>
    <div class="add-box">
      操作：<el-button class="add" type="primary" plain @click="addUser"
        >+ 新增成员</el-button
      >
    </div>
    <div class="btn">
      <el-button type="primary" @click="submit()">提交</el-button>
      <el-button type="primary" @click="resetForm()">重置</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      ruleForm: {
        title: "",
        userList: [],
      },
      type0: {
        type: 0,
        id: "",
        name: "",
        sex: "",
        work_branch: "",
        job: "",
        phone: "",
        email: "",
      },
      type1: {
        type: 1,
        id: "",
        name: "",
        sex: "",
        work_branch: "",
        job: "",
        phone: "",
        email: "",
      },
      personnelList: [],
      rules: {
        title: [{ required: true, message: "请输入团队名称", trigger: "blur" }],
      },
      options: [
        {
          value: 0,
          label: "男",
        },
        {
          value: 1,
          label: "女",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions(["teamSave", "getUserInfo"]),
    init() {
      this.getUserInfo().then((res) => {
        let list = [];
        this.userTeamInfo.items.forEach((item) => {
          if (item.type == 0) {
            this.type0 = item;
          } else if (item.type == 1) {
            this.type1 = item;
          } else {
            list.push(item);
          }
        });
        this.ruleForm.userList = list;
        this.ruleForm.title = this.userTeamInfo.title;
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.personnelList.push(this.type0);
          this.personnelList.push(this.type1);
          this.personnelList = this.personnelList.concat(
            this.ruleForm.userList
          );
          let data = {
            title: this.ruleForm.title,
            personnelList: this.personnelList,
            delete_ids: "",
          };
          this.teamSave(data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.getUserInfo();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addUser() {
      let item = {
        type: 2,
        id: "",
        name: "",
        sex: "",
        work_branch: "",
        job: "",
        phone: "",
        email: "",
      };
      this.ruleForm.userList.push(item);
    },
    removeAttr(item, index) {
      this.$confirm("是否删除该成员", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          if (item.id) {
            this.teamSave({ delete_ids: [item.id] }).then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
            });
          } else {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.ruleForm.userList.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm() {
      this.ruleForm.title = "";
      this.ruleForm.userList = [];
      this.type0 = {
        type: 0,
        id: "",
        name: "",
        sex: "",
        work_branch: "",
        job: "",
        phone: "",
        email: "",
      };
      this.type1 = {
        type: 1,
        id: "",
        name: "",
        sex: "",
        work_branch: "",
        job: "",
        phone: "",
        email: "",
      };
    },
  },
  computed: {
    ...mapGetters(["userInfo", "userTeamInfo"]),
  },
};
</script>

<style scoped>
.user {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 0 20px 0;
}
.user >>> .el-input__inner {
  border: none;
  width: 100%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  padding: 0;
}
.user >>> .el-select {
  width: 100%;
}
.user >>> .el-form-item {
  width: 92%;
  border-bottom: 1px solid #e6e6e6;
  margin: 8px 15px 0;
  padding-bottom: 10px;
}
.team-title {
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  padding: 0 15px;
  color: #333;
  font-size: 15px;
  font-weight: bold;
  background: #f5f5f5;
}
.line {
  width: 100%;
  height: 15px;
  background: #f5f5f5;
}
.btn {
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
.btn >>> .el-button {
  width: 48%;
  height: 45px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #fffdfd;
  border-radius: 4px;
  letter-spacing: 3px;
  border: none;
  margin-top: 28px;
}
.btn .el-button:nth-of-type(1) {
  background: #0e93e4;
}
.btn .el-button:nth-of-type(2) {
  background: #e12727;
}
.add-box {
  text-align: right;
  padding: 15px;
}
</style>